<template>
    <view class="xy_index">
        <!-- tab -->
        <uni-nav-bar :headUrl="headUrl" title="高州中学教育促进会" status-bar></uni-nav-bar>
        <!-- 轮播图 -->
        <view class="swiperList">
            <img :src="imgUrlBase && (imgUrlBase+'yx-swiper.jpg')" alt />
        </view>
        <!-- 金额/参与人数 -->
        <view class="sumAndPeo">
            <view class="sum">
                <view class="number">123,456</view>
                <view class="text">已捐金额</view>
            </view>
            <view class="line"></view>
            <view class="manTime">
                <view class="number">23164</view>
                <view class="text">参与人次</view>
            </view>
        </view>
        <!-- vant tab -->
        <van-tabs animated swipeable :active="currentTab" @change="onChange">
            <van-tab title="活动说明">
                <view class="content">
                    <view class="title">高州中学校友平台温暖上线</view>
                    <view class="time">2020-01-06</view>
                    <view class="details">
                        广东高州中学位于广东省高州市，是广东省百年名校，广东省国家级示范性普通高中，被誉为“高雷地区民主革命的摇篮”。
                        <br />广东高州中学在办学中始终坚持“和谐育人，全面发展，艰苦卓绝，泽福社会”的理念，创造了一流的成绩。这里，每年都有一批中考留下遗憾的择校生升入重点院校和本科院校。在这里，学生的个性特长得到充分发展，体育类、艺术类考生各领风骚，成绩骄人。
                        学校因此被汕头大学、南方医科大学、广东工业大学、广州医科大学、华南师范大学等确定为优质生源基地。
                    </view>
                </view>
            </van-tab>
            <van-tab title="校友榜单">
				<view class="rankingList">
					<view class="number">1</view>
					<view class="headerImg">
						<img :src="imgUrlBase && (imgUrlBase+'default_avatar.png')" alt="">
					</view>
					<view class="info">
						<view class="name">张*贵</view>
						<view class="class">2003届高三（6）班</view>
					</view>
					<view class="total">123,456</view>
				</view>
			</van-tab>
            <van-tab title="班级榜单">内容 3</van-tab>
            <van-tab title="最新捐款">内容 4</van-tab>
        </van-tabs>
        <!-- 底部 -->
        <view class="bottom">
            <img class="alumniBtn" :src="imgUrlBase && (imgUrlBase+'xy-xiaoyoulu.png')" alt />
            <view class="invite">
                <view class="text">邀请校友捐款</view>
            </view>
            <view class="self">
                <view class="text">为母校捐款</view>
            </view>
            <view class="verification">
                <view class="text">暂未完成校友验证，点此开启验证</view>
            </view>
        </view>
    </view>
</template>

<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
export default {
    data() {
        return {
			imgUrlBase: this.$imgUrlBase, // 图片基准路径
            indicatorDots: true, // 显示面板圆点
            autoplay: true, // 自动播放
            interval: 2000, // 时间间隔
            duration: 500, // 滑动动画时长
            circular: true, // 衔接
            imgList: [],
			currentTab: 0, // tab栏默认选择
			headUrl: 'http://q45cindpk.bkt.clouddn.com/default_avatar.png', // 左上角头像
        };
    },
    onLoad(options) {},
    onShow() {
        // this.position();
    },
    components: {
        uniNavBar
    },
    methods: {
        //点击切换
        onChange(event) {
            console.log(event);
        }

    }
};
</script>

<style lang="scss" scoped>
.xy_index {
    position: relative;
    margin: 0 auto;
    padding-bottom: 220rpx;
    font-family: PingFang SC;
    uni-nav-bar {
        position: fixed;
        background: #ffffff;
    }
    .swiperList {
        padding-top: 88rpx;
        img {
            width: 750rpx;
            height: 326rpx;
        }
    }
    .sumAndPeo {
        position: absolute;
        z-index: 9;
        background: #ffffff;
        top: 355rpx;
        margin: 0 60rpx;
        width: 631rpx;
        height: 161rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0px 4rpx 24rpx 0 rgba(129, 170, 164, 0.25);
        border-radius: 10rpx;
        .line {
            width: 1rpx;
            height: 69rpx;
            background: rgba(221, 236, 234, 1);
        }
        .number {
            color: #00caab;
            font-size: 36rpx;
            font-weight: bold;
            line-height: 60rpx;
        }
        .text {
            text-align: center;
            font-size: 26rpx;
            color: rgba(55, 55, 55, 1);
        }
    }
    van-tabs {
        display: block;
        margin-top: 175rpx;
        /deep/.van-tab--active {
            color: #00caab !important;
        }
        /deep/.van-tabs__line {
            background-color: #00caab !important;
        }
        /deep/.van-hairline--top-bottom:after {
            border: none !important;
        }
        .content {
            padding: 40rpx 45rpx 0;
            .title {
                font-size: 28rpx;
                font-weight: bold;
                color: rgba(79, 79, 79, 1);
            }
            .time {
                font-size: 24rpx;
                color: rgba(173, 173, 173, 1);
                padding: 13rpx 0 43rpx 0;
            }
            .details {
                font-size: 26rpx;
                color: rgba(80, 80, 80, 1);
                line-height: 38rpx;
            }
        }
    }

    .bottom {
        position: fixed;
        bottom: 0;
        height: 200rpx;
        width: 750rpx;
        background: #ffffff;
        img {
            margin-top: 20rpx;
            width: 192rpx;
            height: 186rpx;
        }
        .invite {
            position: absolute;
            bottom: 50rpx;
            right: 290rpx;
            display: inline-block;
            width: 218rpx;
            height: 72rpx;
            background: rgba(255, 255, 255, 1);
            border: 1rpx solid #00caab;
            border-radius: 36rpx;
            text-align: center;
            line-height: 72rpx;
            .text {
                font-size: 26rpx;
                color: rgba(0, 202, 171, 1);
            }
        }
        .self {
            position: absolute;
            bottom: 50rpx;
            right: 40rpx;
            display: inline-block;
            width: 218rpx;
            height: 72rpx;
            background: #00caab;
            border-radius: 36rpx;
            text-align: center;
            line-height: 72rpx;
            .text {
                font-size: 26rpx;
                color: #ffffff;
            }
        }
        .verification {
            position: absolute;
            bottom: 146rpx;
            right: 0;
            width: 356rpx;
            height: 41rpx;
            background: rgba(175, 247, 236, 1);
            text-align: right;
            padding-right: 11rpx;
            opacity: 0.7;
            background-image: linear-gradient(to right, #ffffff, #aff7ec);
            .text {
                font-size: 18rpx;
                color: rgba(0, 202, 171, 1);
                line-height: 41rpx;
            }
        }
    }
}
</style>